<template>
	<view>
		
		<view class="cell-box" v-for="(item,index) in clients" :key="index">
		    <view class="weui-cell" @click="onClientSelected" :data-index="index">
		        <view class="weui-cell__bd">
		            <view>
		                <text style="font-weight: bold">{{ item.name }}</text>
		            </view>
		            <view>
		                <text :class="'sext' + item.sex">{{ item.sex == 1 ? '男' : '女' }}</text>
		                <text style="margin-left: 10rpx">{{ item.age }}周岁</text>
		                <text style="margin-left: 10rpx">{{ item.mobile }}</text>
		            </view>
		        </view>
		        <view class="weui-cell__ft">
		            <text v-if="act == 'select'" style="
		                display: inline-block;
		                padding: 15rpx 30rpx;
		                border: 1rpx solid #0bb584;
		                color: #0bb584;
		                font-weight: bold;
		                border-radius: 10rpx;
		                font-size: 28rpx;
		                overflow: hidden;
		            ">
		                选择
		            </text>
		            <text v-else @click="removeClient" :data-id="item.id" style="
		                display: inline-block;
		                padding: 15rpx 30rpx;
		                border: 1rpx solid #eeeeee;
		                color: #f13e6d;
		                border-radius: 10rpx;
		                font-size: 28rpx;
		                overflow: hidden;
		            ">
		                移除
		            </text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app';
	import request from '../../common/utils/request.js';
	import {ref,toRaw,reactive} from 'vue';
	const act =ref()
	const clients=ref([])
		onLoad((options)=>{
			if(options.act=='select'){
				act.value=options.act
				uni.setNavigationBarTitle({
					title:"选择服务对象"
				})
				
			}else{
				uni.setNavigationBarTitle({
					title:"服务对象管理"
				})
			}
				request.request('/User/clients',"GET",{}).then(res=>{					
					clients.value=res.data.clients
					// console.log(clients.value);
				})
		})
		
	const onClientSelected=(e)=>{
		
		//点击索引
		const index=e.currentTarget.dataset.index
		const clientsData=clients.value[index]
		
		uni.$emit("clientsChange",toRaw(clientsData))
		uni.navigateBack()
	}	
	
	
	
	const removeClient=()=>{
		console.log(11111);
		uni.showToast({
			title:'删除成功',
			duration:3000
		})
	}
</script>

<style lang="scss">
page {
    background: #f4f4f4;
}
.weui-cells {
    margin: 0;
}
.weui-cell {
    padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
}
.weui-cell view {
    font-size: 30rpx;
}
.weui-cell text {
    font-size: 30rpx;
}

.cell-box {
    margin: 20rpx;
    position: relative;
    border-radius: 10rpx;
    background: #ffffff;
    overflow: hidden;
}

.sext1 {
    color: #4881df;
}
.sext2 {
    color: #df4872;
}

.sex {
    padding: 15rpx 30rpx;
    display: inline-block;
    border: 1rpx solid #eeeeee;
}
.sex1 {
    border-right: 0 none;
    border-radius: 8rpx 0 0 8rpx;
}
.sex2 {
    border-radius: 0 8rpx 8rpx 0;
}
.sex1on {
    background: #4881df;
    border-color: #3b77dc;
    color: #ffffff;
}
.sex2on {
    background: #df4872;
    border-color: #df4872;
    color: #ffffff;
}
</style>
